<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
	<script th:src="@{/js/jquery/3.5.1/jquery.min.js}" ></script>
	<link th:href="@{/css/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
	
	<script th:src="@{/js/layui/2.5.7/layui/layui.js}" ></script>
	<link th:href="@{/js/layui/2.5.7/layui/css/layui.css}" rel="stylesheet">
	
	<link th:href="@{/css/common/common.css}" rel="stylesheet">
<!-- 
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
	
	<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
	<link href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" rel="stylesheet">
	 -->
	<style type="text/css">
		
	</style>
</head>
<body>
	<div id="el" class="all">
		<div class="div_header">
		<!-- 
			<div class="row">
				<div class="col-md-3">
					<span>要件名称：</span>
					<input style="width: 120px;" type="text" v-model="queryParam.item_name">
					
					<button type="button" class="btn btn-primary " @click="queryList();">查询</button>
					<button type="button" class="btn btn-primary " @click="_resetQueryParam();">重置</button>
				</div>
			</div>
			 -->
			<div class="row">
				<div class="col-md-12" style="text-align: right;">
					<button type="button" class="btn btn-primary " onclick="toAdd();">增加</button>
					<button type="button" class="btn btn-primary " onclick="goBack();">返回</button>
				</div>
			</div>
		</div>
		<div class="div_main">
			<div id="div_content" class="main_div">
				<div id="mainList" style="width: 100%;">
					
				</div>
			</div>
		</div>
		
		
		
		
	</div>

	<div id="addDiv" style="width: 550px; height: 200px;padding: 15px;display: none;">
		<div style="width: 100px; display: inline-block;"><span>项目名称：</span></div>
		<div style="display: inline-block;">
			<input id="door_project_name" style="width: 120px;" type="text" class="_addParam">
		</div>
		
		<br/>
		<br/>
		
		<div style="width: 100px; display: inline-block;"><span>路径：</span></div>
		<div style="display: inline-block;">
			<input id="url" style="width: 260px;" type="text" class="_addParam">
		</div>
		
		<br/>
		<br/>
		
		<div style="width: 100px; display: inline-block;"><span>排序：</span></div>
		<div style="display: inline-block;">
			<input id="ord" style="width: 120px;" type="text" class="_addParam">
		</div>
		<br/>
		<br/>
		<div style="text-align: right; padding-right: 15px;">
			<button type="button" class="btn btn-primary " onclick="doAdd();">保存</button>
			<button type="button" class="btn btn-primary " onclick="closeAll();">取消</button> 
		</div>
	</div>
	
	<div id="updateDiv" style="width: 550px; height: 200px;padding: 15px;display: none;">
		<div style="width: 100px; display: inline-block;"><span>项目名称：</span></div>
		<div style="display: inline-block;">
			<input id="id" style="width: 120px;" type="hidden" class="_updateParam">
			<input id="door_project_name" style="width: 120px;" type="text" class="_updateParam">
		</div>
		
		<br/>
		<br/>
		
		<div style="width: 100px; display: inline-block;"><span>路径：</span></div>
		<div style="display: inline-block;">
			<input id="url" style="width: 260px;" type="text" class="_updateParam">
		</div>
		
		<br/>
		<br/>
		
		<div style="width: 100px; display: inline-block;"><span>排序：</span></div>
		<div style="display: inline-block;">
			<input id="ord" style="width: 120px;" type="text" class="_updateParam">
		</div>
		<br/>
		<br/>
		<div style="text-align: right; padding-right: 15px;">
			<button type="button" class="btn btn-primary " onclick="updateDoorProject();">修改</button>
			<button type="button" class="btn btn-primary " onclick="closeAll();">取消</button> 
		</div>
	</div>
	
</body>
<script type="text/javascript">
	var _util = {
		queryParam: function(jObj){
			if(jObj == null || jObj.length == 0){
				return {};
			}
			var res = {};
			jObj.each(function(i){
				console.log(jObj[i]);
				let id = jQuery(jObj[i]).attr("id");
				let val = jQuery(jObj[i]).val();
				if(id)
					res[id] = val;
			});
			
			return res;
		},
		cleanParam: function(jObj){
			if(jObj == null || jObj.length == 0){
				return {};
			}
			jObj.each(function(i){
				console.log(jObj[i]);
				let id = jQuery(jObj[i]).attr("id");
				if(id)
					jQuery(jObj[i]).val("");
			});
			
		}
	};
	
	$(function(){ 
		queryList();
		
		layui.use('layer', function(){
			var layer = layui.layer;
			window._layer = layer;
		});
	});
	
	function closeAll(){
		_layer.closeAll();
	}
	
	function queryList(){
		
		var rel_project_door_id = '[[${rel_project_door_id}]]';
		
		var col1 = [ [

			{field:'door_project_name', width:'30%', title: '项目名称'}
			,{field:'url', width: '50%', title: '路径'}
			,{field:'ord', width: '10%', title: '排序'}
			,{field:'ord',width: '10%', title: '操作', templet:function(row){
			var html = "";
			html += "<a onclick=\"toUpdate('"+(row.door_project_name||'')+"', '"+(row.ord||'')+"', '"+row.id+"', '"+(row.url||'')+"');\">编辑</a>&nbsp;&nbsp;";
			html += "<a onclick=\"deleteDoorProjectSub('"+row.id+"');\">删除</a>&nbsp;&nbsp;";
			return html;
			}}
					    ] ];
		
		layui.use('table', function(){
		  var table = layui.table;
		  window.myTable = table;
		  //var xh= $(window).height() -($("#projectList").height()+$("#mainList").offset().top-$(document).scrollTop());
		  var xh = 400;
		  table.render({
		    elem: '#mainList'
		    ,method: "get"
		    ,where: {rel_project_door_id: rel_project_door_id}
		    ,url: '[[@{/}]]rest/txzldp/door/queryDoorProjectSub'
		    ,cols: col1
		  });
	      
		});
		
	}
	
	function toAdd(){
		_util.cleanParam(jQuery("._addParam"));
		self.addIndex = _layer.open({
		  type: 1,
		  area: ['550px', '200px'],
		  shade: false,
		  title: false, 
		  content: $('#addDiv')
		});
	}
	
	function toUpdate(door_project_name, ord, id, url){
		
		jQuery("[id=door_project_name][class*=_updateParam]").val(door_project_name||'');
		jQuery("[id=ord][class*=_updateParam]").val(ord||'');
		jQuery("[id=id][class*=_updateParam]").val(id||'');
		jQuery("[id=url][class*=_updateParam]").val(url||'');
		
		self.addIndex = _layer.open({
		  type: 1,
		  area: ['550px', '200px'],
		  shade: false,
		  title: false, 
		  content: $('#updateDiv')
		});
	}
	
	function doAdd(){
		var rel_project_door_id = '[[${rel_project_door_id}]]';
		jQuery.ajax({
			url: '[[@{/}]]rest/txzldp/door/insertDoorProjectSub',
			async: true,
			//dataType: 'json',
			contentType: "application/json",
			type: 'post',
			data: JSON.stringify(jQuery.extend({rel_project_door_id: rel_project_door_id}, _util.queryParam(jQuery("._addParam")))),
			//data: _util._queryParam(jQuery("._addParam")),
			success: function(res){
				//console.log(res);
				_layer.closeAll();
				queryList();
			}
		});
		
	}
	
	function updateDoorProject(){
		jQuery.ajax({
			url: '[[@{/}]]rest/txzldp/door/updateDoorProjectSub',
			async: true,
			//dataType: 'json',
			contentType: "application/json",
			type: 'post',
			data: JSON.stringify(_util.queryParam(jQuery("._updateParam"))),
			//data: _util._queryParam(jQuery("._addParam")),
			success: function(res){
				//console.log(res);
				_layer.closeAll();
				queryList();
			}
		});
		
	}
	
	function deleteDoorProjectSub(id){
		if(!confirm("是否删除？"))
			return;
		jQuery.ajax({
			url: '[[@{/}]]rest/txzldp/door/deleteDoorProjectSub',
			async: true,
			//dataType: 'json',
			contentType: "application/json",
			type: 'post',
			data: JSON.stringify({id: id}),
			//data: _util._queryParam(jQuery("._addParam")),
			success: function(res){
				//console.log(res);
				queryList();
			}
		});
		
	}
	
	function goBack(){
		window.history.go(-1);
	}
	
</script>
</html>